<script setup>
import { ref, toRefs, reactive } from "vue";
const title = ref("");
// 使用ref声明基本数据类型的响应式
const user = ref({
  name: "jay",
  age: 18,
});
// 直接解构ref会消失
// const { name, age } = user.value;
// 使用toRefs可以保持与源对象保持响应式链接
const a = toRefs(user.value);

// 使用reactive声明引用数据类型的响应式
//  reactive声明的对象直接修改内部属性 ，（只能用于对象，不能替换整个对象）
// reactive替换整个对象响应式丢失的解决方法：
// 1.改成ref
// 2.使用object.assign方法
const info = reactive({
  name: "jj",
  age: 20,
});
const Reactive = () => {
  //   // 不能替换整个对象
  //   info = {
  //     name: "joLin",
  //     age: 18,
  //   };
  // 解决方法
  Object.assign(info, {
    name: "joLin",
    age: 18,
  });
};
</script>

<template>
  <div>
    <p ref="title">我喜欢jay</p>
    <!-- // 使用toRefs可以保持与源对象保持响应式链接 -->
    <p>{{ a }}</p>
    <!-- // 不需要.value直接可以读取数据 -->
    <p>{{ info }}</p>
    <p>{{ info.name }}</p>
    <button @click="Reactive()">更改</button>
  </div>
</template>

<style scoped></style>
